<template>
  <div class="right-con">
    <el-form ref="form" label-width="120px" style="width:80%;">
      <el-form-item label="设备编号：">
        <div>{{this.$route.query.device_sn}}</div>
      </el-form-item>
      <el-form-item label="设备名称：">
        <el-row>
          <el-col :span="18">
            <el-input placeholder="最多不超过30个字，必填" v-model="name"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">最多不超过30个字，必填</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-row>
          <el-col :span="18">
            <el-input placeholder="最多不超过30个字，必填" v-model="ware_name"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">最多不超过30个字,必填</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="商品封面图：">
        <div class="clearfix">
          <div class="fl mr30">
            <img v-if="!coverImgUrl" height="120" src="../../assets/images/up_data_img.png" alt="">
            <img v-else :src="coverImgUrl" height="120" style="display: block" alt="">
          </div>
          <div class="fl mr30">
            <div>
              <label class="sentimg">
                <input type="file" name="image_file" @change="sendData($event,500,33/28)">
              </label>
            </div>
          </div>
          <div class="mt10 fs12" style="line-height:1;color:#999">图片长宽比例为33:28，且大小不超过500kb,必填</div>
        </div>
      </el-form-item>
      <el-form-item label="商品详情图：">
        <div class="clearfix">
          <div class="fl mr30">
            <img v-if="!dialogImageUrl" height="120" src="../../assets/images/up_data_img.png" alt="">
            <img v-else :src="dialogImageUrl" height="120" style="display: block" alt="">

          </div>
          <div class="fl mr30">
            <div>
              <label class="sentimg">
                <input type="file" name="image_file" @change="sendData($event,1000)">
              </label>
            </div>
          </div>
          <div class="mt10 fs12" style="line-height:1;color:#999">图片宽为570px,图片大小不超过1000kb</div>
        </div>
      </el-form-item>
      <el-form-item label="所需金币：">
        <el-row>
          <el-col :span="18">
            <el-input placeholder="填写整数1-999,必填" v-model="coin" class="mr15" style="width:90%;"></el-input>
            金币/次
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">填写整数1-9999,必填</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="onSubmit">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api';

  export default {
    name: "edit-dolls",
    data() {
      return {
        imgurl: '',
        fdata: new FormData(),
        name: '',
        coin: '',
        imgData: null,
        is_show: false,
        coverImgUrl: '', //封面图
        dialogImageUrl: '', //详情图
        ware_name: '',
        dialogVisible: false
      };
    },
    mounted: function () {
      this.getInfo();
    },
    methods: {
      getInfo: function () {
        api.fetch("/api/admin/machines/" + this.$route.query.id)
          .then(res => {
            this.coin = res.data.coin;
            this.dialogImageUrl = res.data.detail_image;
            this.name = res.data.name;
            this.coverImgUrl = res.data.ware_image;
            this.ware_name = res.data.ware_name;
          }).catch();
      },
      sendData: function (obj, imgsize, imgwh) { //图片上传
        let maxSize = imgsize * 1024; //最大500KB
        let file = obj.target.files[0];
        let that = this;
        let fileSize = file.size;
        if (maxSize < fileSize) {
          this.$message.error('图片过大！');
          return false;
        } else {
          if (imgwh) {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (theFile) {
              var image = new Image();
              image.src = theFile.target.result;
              image.onload = function () {
                let wh = this.width / this.height;
                if (wh != imgwh) {
                  that.$message.error('图片长宽比例不合适！');
                  return false;
                } else {
                  if (imgsize == 500) { //封面图
                    that.coverImgUrl = that.getObjectURL(obj.target.files[0]);
                    that.fdata.append("ware_image_file", obj.target.files[0]);
                  } else { //详情图
                    that.dialogImageUrl = that.getObjectURL(obj.target.files[0]);
                    that.fdata.append("detail_image_file", obj.target.files[0]);
                  }
                }
              };
            }
          } else {
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (theFile) {
              var image = new Image();
              image.src = theFile.target.result;
              image.onload = function () {
                let wh = this.width;
                if (this.width != 570) {
                  that.$message.error('图片宽度为570PX！');
                  return false;
                } else {
                  if (imgsize == 500) { //封面图
                    that.coverImgUrl = that.getObjectURL(obj.target.files[0]);
                    that.fdata.append("ware_image_file", obj.target.files[0]);
                  } else { //详情图
                    that.dialogImageUrl = that.getObjectURL(obj.target.files[0]);
                    that.fdata.append("detail_image_file", obj.target.files[0]);
                  }
                }
              };
            }
          }
        }
      },//图片 上传
      onSubmit: function () {
        let is_submitok = true;
        if (!this.name) {
          this.$message.error('请输入设备名称！');
          is_submitok = false;
        }
        if (this.name) {
          if (this.name.length > 30) {
            this.$message.error('设备名称最多不超过30个字！');
            is_submitok = false;
          }
        }
        if (!this.ware_name) {
          this.$message.error('请输入设备名称！');
          is_submitok = false;
        }
        if (this.ware_name) {
          if (this.ware_name.length > 30) {
            this.$message.error('商品名称最多不超过30个字！');
            is_submitok = false;
          }
        }
        if (!this.coverImgUrl) {
          this.$message.error('请上传封面图！');
          is_submitok = false;
        }
        if (this.coin <= 0 || this.coin > 9999 ) {
          this.$message.error('填写整数1-9999!');
          is_submitok = false;
        }else{
          let str=/^[0-9]*[1-9][0-9]*$/;
          if(!str.test(this.coin)){
            this.$message.error('填写整数1-9999!');
            is_submitok = false
          }
        }
        if (is_submitok == true) {
          this.fdata.append("id", this.$route.query.id);
          this.fdata.append("ware_name", this.ware_name); //设备名称
          this.fdata.append("name", this.name);
          this.fdata.append("coin", this.coin);
          api.fetch("/api/admin/machines/" + this.$route.query.id, {
            method: 'post',
            data: this.fdata
          })
            .then(res => {
              this.$message({
                message: '设置成功！',
                type: 'success'
              });
              this.$router.push('/dollsBox')
            }).catch();
        }
      },
      getObjectURL: function (imgobj) { //图片显示处理方法
        var url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(imgobj)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(imgobj)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(imgobj)
        }
        return url
      },
      // getLength: function (str) { //字符长度
      //   let totalLength = 0;
      //   for (let i = 0; i < str.length; i++) {
      //     if (str.charCodeAt(i) <= parseInt("0x7F")) {
      //       totalLength += 1;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x7FF")) {
      //       totalLength += 2;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0xFFFF")) {
      //       totalLength += 3;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x1FFFFF")) {
      //       totalLength += 4;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x3FFFFFF")) {
      //       totalLength += 5;
      //     }
      //     else {
      //       totalLength += 6;
      //     }
      //   }
      //   return totalLength;
      // }
    }
  }
</script>

<style scoped>
  .clearfix {
    padding: 15px 0;
  }

  .clearfix .fl {
  }

  .sentimg {
    width: 120px;
    height: 120px;
    background: #f5f5f5;
    display: block;
    overflow: hidden;
    position: relative;
  }

  .sentimg input {
    opacity: 0;
  }

  .sentimg:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -1px;
  }

  .sentimg:before {
    content: '';
    display: block;
    height: 30px;
    width: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -1px;
  }
</style>
